html {
    line-height: 1.5;
    font-family: Arial,Helvetica,STHeiTi,sans-serif;
    background: #f2f2f2;
}

body {
    min-width: 320px;
    margin: 0 auto;
}

.blank {
    width: 10rem;
    height: .32rem;
}
.header {
    position: relative;
    width: 10rem;
}
.header img{
    display: block;
    width: 10rem;
    height: 1.333333rem;
}

.header .close-btn {
    display: block;
    position: absolute;
    width: .4rem;
    height: .4rem;
    left: .32rem;
    top: .4rem;
    background: url(../images/head-close.png) no-repeat 0 0;
    background-size: 0.4rem auto;
}

.header .open-btn {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 2.533333rem;
    height: 1.2rem;
}

.nav {
    width: 10rem;
    height: 2.4rem;
    background-color: #FFDB47;
}

.nav .nav-top{
    margin: 0 .453333rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.173333rem;
}

.nav .nav-top .classify img {
    width: .48rem;
    height: .8rem;
}

.nav .nav-top .ad img {
    width: 5.2rem;
    height: 1.013333rem;
}
.nav .nav-top .login img {
    width: .48rem;
    height: .8rem;
}


.nav .nav-search {
    position: relative;
    display: flex;
    padding: 0 .32rem;
    height: 1.226667rem;
    align-items: center;
}

.nav .nav-search a {
    position: absolute;
    display: block;
    width: 9.36rem;
    height: 1.173333rem;
    z-index: 20;
}
.nav .nav-search i {
    position: absolute;
    display: block;
    width: .48rem;
    height: .48rem;
    top: .373333rem;
    left: .6rem;
    background: url(../images/search.png) no-repeat 0 0;
    background-size: .48rem auto;
}

.nav .nav-search form input{
    display: block;
    box-sizing: border-box;
    width: 9.36rem;
    height: .853333rem;
    padding: .04rem .266667rem 0 .866667rem;
    border: none;
    border-radius: 32px;
    color: #999;
    font-size: .373333rem;
}

.banner {
    box-sizing: border-box;
    width: 10rem;
    height: 3.053333rem;
    background: url(../images/bg.png) no-repeat 0 0;
    background-size: 10rem 3rem;
}


.banner .wrapper {
    position: relative;
    margin: 0 .32rem;
    height: 3.053333rem;
    overflow: hidden;
    border-radius: .2rem;
}

.banner .wrapper .swipe {
    width: 80rem;
}

.banner .wrapper .swipe li {
    position: absolute;
    left : 9.36rem;
}

.banner .wrapper .swipe li img {
    display: block;
    width: 9.36rem;
    height: 3.053333rem;
}

.banner .wrapper .swipe li.current {
    left: 0;
}   

.banner .wrapper .trigger {
    position: absolute;
    bottom: .16rem;
    width: 9.36rem;
    height: .106667rem;
}

.banner .wrapper .trigger ul { 
    width: 2.773333rem;
    height: .106667rem;
    margin: 0 auto;
}

.banner .wrapper .trigger li {
    float: left;
    margin: 0 .053333rem;
}
.banner .wrapper .trigger i {
    display: block;
    width: .12rem;
    height: .106667rem;
    border-radius: .106667rem;
    background: rgba(0, 0, 0, 0.3);
}

.banner .wrapper .trigger li.current i{
    width: .24rem;
    background-color: #fff;
}

.view {
    width: 10rem;
    height: 3.666667rem;
}
.view a {
    float: left;
}
.view img {
    width: 3.333333rem;
    height: 3.666667rem;
}

.enter ul{
    width: 10rem;
    height: 4.266667rem;
}

.enter ul a {
    text-decoration: none;
}

.enter ul li {
    float: left;
}
.enter img {
    width: 1.12rem;
    height: 1.12rem;
    margin: .32rem .44rem 0;
}

.enter p {
    margin: 0;
    font-size: .293333rem;
    width: 2rem;
    height: .373333rem;
    text-align: center;
    line-height: .373333rem;
    color:#666;
}

.new {
    display: flex;
    margin: .32rem 0;
    width: 10rem;
    height: 3.12rem;
    justify-content: space-between;
}

.new img {
    height: 3.12rem;
}
.new a:nth-child(1) img{
    width: 4.98rem;
}

.new a:nth-child(2) img{
    width: 2.48rem;
}

.new a:nth-child(3) img{
    width: 2.48rem;
}

.panel {
    margin: 0 .32rem;
    width: 9.36rem;
    border-radius: .16rem;
    overflow: hidden;
}
.big {
    display: flex;
    
    height: 3.44rem;
    justify-content: space-between;
    overflow: hidden;
}

.big >div {
    width: 4.666667rem;
    height: 3.44rem;
    background-color: #fff;
}

.big  .title {
    box-sizing: border-box;
    height: .773333rem;
    line-height: .533333rem;
    font-size: .373333rem;
    padding-left: .32rem;
    padding-top: .24rem;
    color: #333;
    font-weight: bold;
}

.big .desc {
    height: .4rem;
    width: 4rem;
    margin-left: .32rem;
    margin-top: .053333rem;
    font-size: .32rem;
    color :#999;
    line-height: .4rem;
}

.big ul {
    display: flex;
    width: 4.293333rem;
    height: 1.986667rem;
    margin-top: .066667rem;
    padding-left: .373333rem;
    justify-content: space-between;
}

.big ul li {
    position: relative;
    display: flex;
    width: 1.6rem;
    height: 1.986667rem;
    margin-right: .733333rem;
    flex-direction: column;
    align-items: center;
}

.big ul li img {
    width: 1.6rem;
    height: 1.6rem;
}

.big ul li .price {
    color:#F50 ;
    font-size: .346667rem;
}

.big ul li .img-desc {
    position: absolute;
    bottom: 0;
    font-size: .266667rem;
    width: 2rem;
    height: .426667rem;
    padding-top: .293333rem;
    line-height: .426667rem;
    text-align: center;
    background: url(../images/desc.png) no-repeat 0 0;
    background-size: 2rem .72rem;
}

.recommend {
    display: flex;
    /* width: 9.36rem; */
    margin-top: .013333rem;
    height: 2.293333rem;
    background-color: #fff;
}

.recommend .left {
    width: 1.826667rem;
    height: 1.666667rem;
    padding: .626667rem .24rem 0;
}

.recommend .left .title {
    color: #444;
    font-weight: bold;
    font-size: .426667rem   ;
}

.recommend .left .desc {
    color: #999;
    font-size: .32rem;
}

.recommend .right {
    display: flex;
    width: 6.773333rem;
    height: 2.293333rem;
    justify-content: space-between;
}

.recommend .right a {
    display: flex;
    width: 1.6rem;
    height: 2.293333rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.recommend .right a img {
    width: 1.333333rem;
    height: 1.333333rem;
}

.recommend .right a p {
    color:#333;
    font-size:  .293333rem;
}

.bd .title img {
    width: 10rem;
    height: .8rem;
}
.bd .list {
    display: flex;
    width: 9.36rem;
    margin: 0 auto .173333rem;
    justify-content: space-between  ;
}
.bd .list .item {
    display: flex;
    width: 3.013333rem;
    height: 3.546667rem;
    background-color: #fff;
    border-radius: .16rem;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
}

.bd .list .item >img {
    width: 2rem;
    height: 2rem;
    margin: .2rem auto 0;
}

.bd .list .item .bt {
    position: relative;
    width: 3.013333rem;
    height: 1.24rem;
    background: url(../images/bottom.png) no-repeat ;
    background-size: 3.013333rem auto;
    text-align: center;
}

.bd .list .item .center {
    background-image: url(../images/bottom2.png);
}


.bd .list .item .bt .name {
    font-size: .293333rem;
    width: 1.28rem;
    height: .4rem;
    line-height: .4rem;
    border-radius: .226667rem;
    border: #D9A87A .026667rem solid;
    color: #D9A87A;
    background-color: #fff;
    margin: -0.2rem auto 0;

}
.bd .list .item .center .name {
    color :#FB7F0A;
    border-color: #FB7F0A;
}
.bd .list .item .bt .title {
    width: 2.933333rem ;
    height: .426667rem;
    color: #FFFFFF;
    font-size: .346667rem;
}

.bd .list .item .bt .desc {
    width: 2.666667rem;
    height: .32rem;
    color: #FFFFFF;
    opacity: .8;
    font-size: .293333rem;
}

.like {
    width: 9.36rem;
    margin: 0 auto;
}

.like .title img {
    width: 9.36rem;
    height: .8rem;
}

.like .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.like .list .item {
    display: flex;
    width: 4.56rem;
    height: 7.04rem;
    padding-bottom: .186667rem;
    margin-bottom: 18px;
    background-color: #fff;
    border-radius: .16rem;
    flex-direction: column;
    align-items: flex-start;
}

.like .list .item img {
    width: 4.56rem;
    height: 4.56rem;
}

.like .list .item .title {
    width: 4.24rem;
    height: .893333rem;
    margin:  .24rem .16rem 0;
    font-size: .346667rem;
    font-weight: bold;
    line-height: .453333rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.like .list .item .cuxiao {
    margin: .146667rem .16rem .32rem;
    border :1px solid #FFBB00;
    background: #FEFBEE;
    font-size: .24rem;
    height: .24rem;
    line-height: .24rem;
    padding: .026667rem .16rem;
    border-radius: .08rem;
}

.like .list .item  .price {
    color: #FF4422;
    font-weight: bold;
    font-size: .48rem;
}

.like .list .item .comments {
    color: #999;
    font-size: .266667rem;
    margin-left: .173333rem;
}

.footer {
    position: fixed;
    bottom: 0;
}
.footer .login img {
    width: 10rem;
    height: 1.2rem;
}

.footer .tab {
    display: flex;
    width: 10rem;
    height: 1.333333rem;
    background-color: #fff;
}

.footer .tab a {
    width: 2rem;
    height: 1.333333rem;
}

.footer .tab a img {
    display: block;
    width: .64rem;
    height: .64rem;
    margin: .16rem auto 0;
}

.footer .tab a span {
    display: block;
    width: 2rem;
    height: .426667rem;
    font-size: .266667rem;
    text-align: center;
    color: #666;
}

.footer .tab a.current span{
    color: #000000;
    font-weight: bold;
}